<template>
	<view class="orderList">
		<view class="order-item" @click="toDetails(item.id)" v-for="item in orderList">
			<view class="top">
				<text class="name">猫之巢(松山湖总店)</text>
				<text class="time">{{item.orderTime}}</text>
			</view>
			<view class="bottom">
				<text class="good">共计{{item.num}}件商品</text>
				<text class="price">￥{{item.amount.toFixed(2)}}</text>
			</view>
			<view class="status" :style="'background-color:'+(item.status==1?'#d3d3d3;':'#e89abe;')">
				<text>{{item.status==1?"未完成":"已完成"}}</text>
			</view>
		</view>
		<view class="banner" v-show="orderList.length!=0">
			仅展示最近15条订单
		</view>
		<view class="banner" v-show="orderList.length==0">
			没有订单哦
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				userId:''
			}
		},
		onLoad() {
			this.userId = JSON.parse(window.localStorage.getItem("user"));
			this.getOrders();
		},
		onShow() {
			this.userId = JSON.parse(window.localStorage.getItem("user"));
			this.getOrders();
		},
		methods: {
			getOrders(){
				uni.request({
					url:"/order/select",
					method:"GET",
					data:{
						page:1,
						pageSize:30,
						userId:this.userId
					},
					success: (res) => {
						console.log(res);
						this.orderList = res.data.data.records;
					}
				})
			},
			toDetails(orderId){
				uni.navigateTo({
					url:"/pages/orderDetails/orderDetails?orderId="+orderId
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner{
		font-size: 24rpx;
		text-align: center;
		color: darkgray;
	}
	.order-item {
		width: 90%;
		border-radius: 10rpx;
		height: 170rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 5rpx 10rpx gray;
		border: 2rpx solid #bcbcbc;
		position: relative;
		overflow: hidden;
		.name{
			font-weight: 600;
		}
		.price{
			font-weight: 600;
		}
		.time{
			font-size: 24rpx;
			color: gray;
		}
		.status{
			position: absolute;
			right: 0;
			top: 35%;
			text-align: center;
			background-color: red;
			width: 120rpx;
			height:50rpx;
			line-height: 50rpx;
			color: white;
			border-radius: 10rpx 0 0 10rpx;
		}
	}

	.top,
	.bottom {
		display: flex;
		justify-content: space-between;
		justify-items: start;
	}
	.bottom{
		justify-items: end;
		margin-top: 55rpx;
	}
</style>